<template>
  <!-- 下拉框 clearable 开启清空功能 -->
  <el-select :value="value" @change="changeChannel" clearable placeholder="请选择">
    <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'my-channel',
  // 接收父传子的value频道ID数据
  // 1. 现在el-select上的v-model="channelId"没有意义，绑定的是组件内部数据
  // 2. 不能使用 v-model="value" 去选中ID对应的频道，value不修改改
  // 3. 我们只需要赋值给el-select即可，使用value属性来赋值， :value="value" 即可
  props: ['value'],
  data () {
    return {
      // 选择产生的频道ID
      // channelId: null,
      // 频道选项
      channelOptions: []
    }
  },
  created () {
    this.getChannelOptions()
  },
  methods: {
    // 选择频道
    changeChannel (channelId) {
      // 后台需要的是ID不能是空字符，但是你可以不传将值改为null
      // if (this.channelId === '') this.channelId = null
      if (channelId === '') channelId = null
      // 将你产生的频道ID数据提交给父组件，通过@input事件
      this.$emit('input', channelId)
    },
    // 获取频道下拉选项数据
    async getChannelOptions () {
      const {
        data: { data }
      } = await this.$http.get('/channels')
      // console.log(res.data.data.channels)  通过res获取数据
      // { data } 中的  data  === res.data
      // { data: { data } } 第二个data才是变量  data === res.data.data
      // data.channels 就是频道下拉选项数据
      this.channelOptions = data.channels
    }
  }
}
</script>

<style scoped lang='less'></style>
